<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽</title>
    <style>

    </style>
</head>
<body>
    <div class="mydiv1" style="width: 100px;height: 100px;background: red;position: absolute;"></div>

      
    <script>


        function Drag(ele){
            this.ele = ele
            this.downFn()
        }
        //点下鼠标
        Drag.prototype.downFn = function(){
            this.ele.onmousedown = (e)=>{
                let ev = e || window.event
                let x = ev.clientX - this.ele.offsetLeft
                let y = ev.clientY - this.ele.offsetTop
                this.moveFn(x,y)
                this.upFn()
            }
        }
        // 
        Drag.prototype.moveFn = function(x,y){
            this.ele.onmousemove = (e) =>{
                let ev = e || window.event
                let xx = ev.clientX
                let yy = ev.clientY
                this.setStyle(xx-x,yy-y)
            }
        }
        //跟随
        Drag.prototype.setStyle = function(lef,top){
            this.ele.style.left =lef + 'px'
            this.ele.style.top = top + 'px'
        }
        //松开
        Drag.prototype.upFn = function(){
            this.ele.onmouseup = () =>{
                this.ele.onmousemove = ""
            }
        }


        


        //继承
        function LimitDrag(ele){
            Drag.call(this,ele)

        }
        let Link = function(){}
        Link.prototype = Drag.prototype
        LimitDrag.prototype = new Link()
        LimitDrag.prototype.constructor = LimitDrag
        LimitDrag.prototype.setStyle = function(left,top){
            left = left<0?0:left
            top = top<0?0:top
            this.ele.style.left = left + 'px'
            this.ele.style.top = top + 'px'
        }

        let mydiv1 = document.querySelector('.mydiv1')
        let drag1 = new LimitDrag(mydiv1)


        let obj = {
		name:"张三",
		age:20,
		test:undefined,
		fn:function(){
			console.log('fn...s')
		}
}
let obj2 = JSON.parse(JSON.stringify(obj))
obj2.age = 30
console.log(obj,obj2) 

        // mydiv1.onmousedown = (e)=>{
        //     let ev = e || window.event
        //     let x = ev.clientX - mydiv1.offsetLeft
        //     let y = ev.clientY - mydiv1.offsetTop
        //     mydiv1.onmousemove = (e) =>{
        //         let ev = e || window.event
        //         let xx = ev.clientX
        //         let yy = ev.clientY
        //         mydiv1.style.left = xx - x + 'px'
        //         mydiv1.style.top = yy - y + 'px'
        //     }
        //     mydiv1.onmouseup = () =>{
        //         mydiv1.onmousemove = ""
        //     }

        // }



            //递归深拷贝
function deepCopy(obj){
    let newObj = Array.isArray(obj)?[]:{};
    for(let key in obj){
    		if(obj.hasOwnProperty(key)){
            if(obj.hasOwnProperty(key)){
              if(typeof obj[key] == "object"){
                if(obj[key] === null){
                  newObj[key] = null
                }else{
                  newObj[key] = deepCopy(obj[key]);
                }
              }else{
                  newObj[key] = obj[key];
              }
            }
    		}
    }
    return newObj;
}

    </script>
</body>
</html>